<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue';
import LightHeader from "../components/LightHeader.vue";
import LightFooter from "../components/LightFooter.vue";
import 'font-awesome/css/font-awesome.min.css';
import { ShoppingTrolley } from '@element-plus/icons-vue'
const active = ref('1')
let showTop = ref(false)
onMounted(() => {
    // 监听滚动事件
    window.addEventListener('scroll', handleScroll);
})
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
})
const handleScroll = () => {
    // 获取页面的高度
    const pageHeight = document.body.clientHeight;
    // 计算页面中部位置
    const middlePosition = pageHeight / 2;
    // 获取当前滚动位置
    const scrollPosition = window.scrollY || window.pageYOffset;
    // 如果滚动位置大于页面中部位置，则显示锚点div，否则隐藏
    showTop.value = scrollPosition > middlePosition;
}
const handleClick = (tab, event) => {
    console.log(tab, event)
}
const pay = () => {
    window.location.href = "https://ai.a100-cn.com/#/login"
}
// 回到顶部
const goTop = () => {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
}
</script>

<template>
    <div class="wrap">
        <!-- 导航栏 -->
        <el-affix :offset="0">
            <LightHeader />
        </el-affix>
        <header id="header">
            <div class="banner">
                <div class="content">
                    <div class="title">
                        <h1>国家光明网科技智算中心算力集群</h1>
                    </div>
                    <h3>助力百万家企业完成AI进化</h3>
                    <div class="features">
                        <ul>
                            <li>
                                <div class="icon">
                                    <img src="@/assets/images/newImg/Frame1.png" alt="服务">
                                </div>
                                <p>重服务</p>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="@/assets/images/newImg/Frame2.png" alt="技术">
                                </div>
                                <p>重技术</p>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="@/assets/images/newImg/Frame3.png" alt="安全">
                                </div>
                                <p>重安全</p>
                            </li>
                        </ul>
                    </div>
                    <div class="describe">
                        <ul>
                            <li>
                                <div class="icon">
                                    <img src="@/assets/images/newImg/Frame4.png" alt="#">
                                </div>
                                <p>7*24小时在线服务</p>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="@/assets/images/newImg/Frame5.png" alt="#">
                                </div>
                                <p>随时随地的查看计算，管理与监控</p>
                            </li>
                            <li>
                                <div class="icon">
                                    <img src="@/assets/images/newImg/Frame6.png" alt="#">
                                </div>
                                <p>工程师团队全天候保障您的数据安全及任务正常运行</p>
                            </li>
                        </ul>
                    </div>
                    <div class="btnBox">
                        <el-button color="#2F54EB" :loading="false" @click="pay">价格测算</el-button>
                        <el-popover placement="right" :width="72" trigger="hover">
                            <template #reference>
                                <el-button color="#2F54EB">咨询客服</el-button>
                            </template>
                            <div class="popupTop">
                                <p>扫码咨询客服</p>
                            </div>
                            <div class="imgBox" style="text-align: center;">
                                <img src="@/assets/images/newImg/blackWechat.png" alt="code">
                            </div>

                        </el-popover>
                    </div>
                </div>

            </div>
        </header>
        <main>
            <!-- 热门活动 -->
            <div id="hotActivity" class="hotActivity" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>热门活动</h3>
                </div>
                <div class="contentBox">
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/image6.png" alt="校园+云">
                        </div>
                        <div class="fontBox">
                            <p>校园+云</p>
                            <span>校园超值优惠专享套餐</span>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Group13.png" alt="校园+云">
                        </div>
                        <div class="fontBox">
                            <p>新客专享</p>
                            <span>新用户优惠活动福利多多</span>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/image7.png" alt="校园+云">
                        </div>
                        <div class="fontBox">
                            <p>会员续费优惠活动</p>
                            <span>会员续费尊享超值折扣服务</span>
                        </div>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/image8.png" alt="校园+云">
                        </div>
                        <div class="fontBox">
                            <p>你充值，我就送</p>
                            <span>充值即可送优惠大礼包</span>
                        </div>
                    </div>
                </div>
                <div class="products">
                    <div class="top">
                        <div class="tabs">
                            <el-tabs v-model="active" class="demo-tabs" @tab-click="handleClick">
                                <el-tab-pane label="推荐产品" name="1"></el-tab-pane>
                                <!-- <el-tab-pane label="开发环境" name="2"></el-tab-pane>
                                <el-tab-pane label="训练模型" name="3"></el-tab-pane>
                                <el-tab-pane label="模型服务" name="4"></el-tab-pane>
                                <el-tab-pane label="数据标注" name="5"></el-tab-pane> -->
                            </el-tabs>
                        </div>
                        <!-- <router-link to="/product" class="more"><p> 更多></p></router-link> -->
                    </div>
                    <div class="productsBox">
                        <div class="ele eles">
                            <div class="top">
                                <p class="title">A100-80G-A</p>
                                <p class="type types">开发环境</p>
                            </div>
                            <div class="center">
                                <p>类型 ：异构计算GPU</p>
                                <p>套餐价格：0.5330元/分钟</p>
                                <p>配置：GPU:A100-80GB*1块</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥23027.3280/<span>月</span></p>
                                    <p class="really">￥280165.8240/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>
                            </div>

                        </div>

                        <div class="ele eles">
                            <div class="top">
                                <p class="title">CPU-01</p>
                                <p class="type types">开发环境</p>
                            </div>
                            <div class="center">
                                <p>类型 ：x86计算</p>
                                <p>套餐价格：0.0004元/分钟</p>
                                <p>配置：CPU:2核,内存:4GB</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥16.4160/<span>月</span></p>
                                    <p class="really">￥199.7280/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="ele eles">
                            <div class="top">
                                <p class="title">test2</p>
                                <p class="type types">开发环境</p>
                            </div>
                            <div class="center">
                                <p>类型 ：异构计算GPU</p>
                                <p>套餐价格：0.3668元/分钟</p>
                                <p>配置：GPU:A100*1块,CPU:4核,内存:8GBvGPU</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥15844.0320/<span>月</span></p>
                                    <p class="really">￥192769.0560/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="ele eles">
                            <div class="top">
                                <p class="title">vgpu-40G</p>
                                <p class="type types">开发环境</p>
                            </div>
                            <div class="center">
                                <p>类型 ：异构计算GPU</p>
                                <p>套餐价格：0.0000元/分钟</p>
                                <p>配置：GPU:A100*2块,CPU:16核,内存:128GBvGPU</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥0.0000/<span>月</span></p>
                                    <p class="really">￥0.0000/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="ele">
                            <div class="top">
                                <p class="title">x86</p>
                                <p class="type">数据标注</p>
                            </div>
                            <div class="center">
                                <p>类型：x86计算</p>
                                <p>套餐价格：0.0000元/分钟</p>
                                <p>配置：CPU:4核,内存:8GB</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥0.0000/<span>月</span></p>
                                    <p class="really">￥0.0000/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>

                            </div>
                        </div>
                        <div class="ele elex">
                            <div class="top">
                                <p class="title">gpu</p>
                                <p class="type typex">模型训练</p>
                            </div>
                            <div class="center">
                                <p>类型：异构计算GPU</p>
                                <p>套餐价格：0.0000元/分钟</p>
                                <p>配置：GPU:A100*1块,CPU:4核,内存:8GB</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥0.0000/<span>月</span></p>
                                    <p class="really">￥0.0000/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>

                            </div>
                        </div>
                        <div class="ele elef">
                            <div class="top">
                                <p class="title">x86</p>
                                <p class="type typef">模型服务</p>
                            </div>
                            <div class="center">
                                <p>类型：x86计算</p>
                                <p>套餐价格：0.0000元/分钟</p>
                                <p>配置：CPU:4核,内存:8GB</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥0.0000/<span>月</span></p>
                                    <p class="really">￥0.0000/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="ele elef">
                            <div class="top">
                                <p class="title">gpu</p>
                                <p class="type typef">模型服务</p>
                            </div>
                            <div class="center">
                                <p>类型：异构计算GPU</p>
                                <p>套餐价格：0.0000元/分钟</p>
                                <p>配置：GPU:A100*1块,CPU:4核,内存:8GB</p>
                            </div>
                            <div class="bottom">
                                <div class="priceBox">
                                    <p class="really">￥0.0000/<span>月</span></p>
                                    <p class="really">￥0.0000/<span>年</span></p>
                                </div>
                                <div class="btnBox">
                                    <el-button type="primary" color="#2F54EB" :icon="ShoppingTrolley"
                                        @click="pay">立即购买</el-button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 我们的服务范围 -->
            <div id="serve" class="serve" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>我们的服务范围</h3>
                    <p>为用户提供从租户入驻、数据准备、数据标注、模型训练、能力部署到能力开放的全流程服务</p>
                </div>
                <div class="ability">
                    <div class="ele">
                        <div class="steps">
                            <p>AI研发生产</p>
                        </div>
                        <p class="small">在AI平台完成数据标注、模型训练和推理</p>
                        <p class="small">部署的全流程</p>
                    </div>
                    <div class="ele">
                        <div class="steps stepTw">
                            <p>AI能力部署</p>
                        </div>
                        <p class="small">能力提供方成熟AI能力在平台部署，并通</p>
                        <p class="small">过能力超市开放</p>
                    </div>
                    <div class="ele">
                        <div class="steps stepTh">
                            <p>AI能力调用</p>
                        </div>
                        <p class="small">能力使用方在能力超市订阅和调用能力，</p>
                        <p class="small">为业务提供智能化服务</p>
                    </div>
                </div>
                <div class="processImg">
                    <img src="@/assets/images/newImg/Group65.png" alt="#">
                </div>
                <div class="advantage">
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame9.png" alt="模型定制">
                        </div>
                        <p class="title">模型定制</p>
                        <p class="msg">算法专家团队全程陪跑，根据需求定制垂类模型</p>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame10.png" alt="英伟达超融合算力">
                        </div>
                        <p class="title">英伟达超融合算力</p>
                        <p class="msg">英伟达算力、国产芯片算力 自适应</p>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame11.png" alt="跨平台算力调度">
                        </div>
                        <p class="title">跨平台算力调度</p>
                        <p class="msg">支持自有资源&云智算力联合调度，在线弹性扩容</p>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame12.png" alt="主流框架预设">
                        </div>
                        <p class="title">主流框架预设</p>
                        <p class="msg">预设主流靠元模型框架和算法框架，支持一键部署调用</p>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame13.png" alt="云端推理预定">
                        </div>
                        <p class="title">云端推理预定</p>
                        <p class="msg">支持无卡用户云端推理，推理结果毫秒级同步至终端</p>
                    </div>
                    <div class="ele">
                        <div class="imgBox">
                            <img src="@/assets/images/newImg/Frame14.png" alt="模型超市">
                        </div>
                        <p class="title">模型超市</p>
                        <p class="msg">支持开发者将模型服务上架MAAS平台，对外提供API服务</p>
                    </div>
                </div>
            </div>
            <!-- 我们支持 -->
            <div id="weSupport" class="weSupport" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>我们支持</h3>
                </div>
                <div class="contentBox">
                    <div class="ele">
                        <div class="steps">
                            <p>01</p>
                        </div>
                        <h4>支持GPU虚拟化技术和GPU<br>碎片优化技术</h4>
                        <p class="other">可以大幅提升模型训练过程中的GPU使用效率</p>
                    </div>
                    <div class="ele step2">
                        <div class="steps">
                            <p>02</p>
                        </div>
                        <h4>国产化资源接入</h4>
                        <p class="other">适国产化NPU计算资源<br>实现高性能A能力推理服务</p>
                    </div>
                    <div class="ele step3">
                        <div class="steps">
                            <p>03</p>
                        </div>
                        <h4>混合资源调度方法和装置</h4>
                        <p class="other">提升系统资源计算效率<br>支撑全业务场景</p>
                    </div>
                    <div class="ele step4">
                        <div class="steps">
                            <p>04</p>
                        </div>
                        <h4>机器学习零门槛开发</h4>
                        <p class="other">支持对AI训练基础组件的管理<br>实现训练任务的快速编排</p>
                    </div>
                </div>
            </div>
            <!-- 产品优势 -->
            <div id="strengths" class="strengths" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>我们支持</h3>
                </div>
                <div class="contentBox">
                    <div class="leftImg">
                        <img src="@/assets/images/newImg/Group342.png" alt="#">
                    </div>
                    <div class="right">
                        <div class="item">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/image31.png" alt="省时">
                            </div>
                            <div class="fontBox">
                                <p>省时</p>
                                <span>平台易用，开箱即用 ｜ 提升科研效率，资源充裕随需使用保障科研成果及时产出</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/image32.png" alt="省时">
                            </div>
                            <div class="fontBox">
                                <p>省心</p>
                                <span>专家团队7*24小时在线支持 ｜ 多元化服务保障，让科研更轻松</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/image33.png" alt="省时">
                            </div>
                            <div class="fontBox">
                                <p>省钱</p>
                                <span>0建设与运维成本 ｜ 按需租用 ｜ 最小化拥有成本</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 产品能力 -->
            <div id="productAbility" class="productAbility" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>产品的能力</h3>
                </div>
                <div class="contentBox">
                    <div class="lower">
                        <div class="top">
                            <div class="num">
                                <p>71%</p>
                                <div class="imgBox">
                                    <img src="@/assets/images/newImg/Group109.png" alt="#">
                                </div>
                            </div>
                            <h4>算力支出最高<span>降低</span></h4>
                        </div>
                        <div class="center">
                            <p>传统算力购买模式：采取固定容量和时长的购买</p>
                            <p class="small">
                                无论用户是否实际使用或是否充分利用所购买的算力，一旦使用时间到期，已购算力即无法继续使用，这导致用户在未充分利用资源的情况下产生不必要的浪费，进而使得投资效益大打折扣。</p>
                        </div>
                        <div class="bottom">
                            <div class="title">
                                <div class="iconBox">
                                    <img src="@/assets/images/newImg/image54.png" alt="#">
                                </div>
                                <h5>云智算算力购买模式：按需购买，实现更灵活的计费方式</h5>
                            </div>
                            <div class="msg">
                                <ul>
                                    <li>
                                        <p>在这种模式下，用户根据实际使用情况进行付费，即只有在真正使用算力时才产生费用。这种先使用后付费的计费方式，不仅使得用户的每一笔支出都得到了充分利用，而且大大节省了用户的成本，提高了投资回报率。
                                        </p>
                                    </li>
                                    <li>
                                        <p>云智算还通过精细化的管理和调度，实现了算力的动态分配和高效利用。这不仅能够满足用户在不同场景下的多样化需求，还能够确保算力资源的最大化利用，进一步提升了用户的满意度和收益。
                                        </p>
                                    </li>
                                    <li>
                                        <p>从专业的角度来看，云智算的按需购买模式不仅具有更高的灵活性和成本效益，而且能够更好地满足用户的实际需求，推动算力行业的持续发展和创新。</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="hoist">
                        <div class="top">
                            <div class="num">
                                <p>63%</p>
                                <div class="imgBox">
                                    <img src="@/assets/images/newImg/Group119.png" alt="#">
                                </div>
                            </div>
                            <h4>研发效率最高<span>提升</span></h4>
                        </div>
                        <div class="center">
                            <p>常规模式下用户模型调试：过程既繁琐耗时 </p>
                            <p class="small">
                                常规模式下，用户进行模型调试或训练，往往需深入代码层面进行开发与调试，过程既繁琐又耗时，增加了算力使用的技术门槛与操作复杂度。同时，由于需要投入大量时间与精力在代码层面，用户的金钱成本也随之上升，降低了整体的投资回报率。
                            </p>
                        </div>
                        <div class="bottom">
                            <div class="title">
                                <div class="iconBox">
                                    <img src="@/assets/images/newImg/image53.png" alt="#">
                                </div>
                                <h5>云智算平台调试模型：实现模型训练，无需编写任何代码 </h5>
                            </div>
                            <div class="msg">
                                <ul>
                                    <li>
                                        <p>借助我们平台的专业服务，用户无需再陷入繁琐的代码开发与调试工作中。通过我们平台提供的直观、易用的节点设置功能，用户能够轻松实现模型训练，无需编写任何代码。这一创新方式不仅极大地简化了模型训练流程，降低了算力使用的技术门槛，还显著提高了算力的使用效率。
                                        </p>
                                    </li>
                                    <li>
                                        <p>通过我们平台，用户能够节省大量时间与金钱成本，将更多精力聚焦于模型优化与业务创新上。我们平台的专业性与便捷性，为用户提供了前所未有的使用体验，使模型训练变得更加简单、高效。在未来的发展中，我们将继续优化平台功能，提升用户体验，助力用户在人工智能领域取得更多突破与成功。
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="positon">
                        <img src="@/assets/images/newImg/image55.png" alt="#">
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <!-- 伙伴入驻 -->
            <div id="join" class="join" data-aos="fade-up" data-aos-delay="300">
                <div class="content">
                    <div class="left">
                        <h4>云智算,期待您的加入</h4>
                        <p>让我们共同引领行业创新浪潮，共绘算力时代赢跑蓝图，我们致力于成为超算互联网服务领域的佼佼者</p>
                    </div>
                    <el-button color="#2F54EB" @click="pay">伙伴入驻申请</el-button>
                </div>

            </div>
            <!-- 页脚 -->
            <div class="lightFooter" data-aos="fade-up" data-aos-delay="300">
                <LightFooter></LightFooter>
            </div>
            <div class="dot" @click="goTop" v-if="showTop">
                <div class="imgBox">
                    <img src="@/assets/images/newImg/dot.png" alt="#">
                </div>
                <p>TOP</p>
            </div>
        </footer>
    </div>
</template>

<style scoped>
.popupTop {
    text-align: center !important;
    background: url(@/assets/images/newImg/top.png)no-repeat center center/cover;
    padding: 5px 0;
    color: #000;
    font-weight: 600;
    margin-bottom: 5px;
}
</style>
<style lang="scss" scoped>
@media (max-width: 768px) {
    header {
        width: 1400px !important;
    }

    .join {
        width: 1400px !important;
    }
}

.wrap {
    width: 100%;
    line-height: 40px;

    header {
        width: 100%;
        overflow: hidden;
        background: url(@/assets/images/newImg/banner.jpg)no-repeat center center/cover;
        // background-size: 100%;

        .banner {
            width: 100%;
            text-align: center;
            padding: 100px 0;
            box-sizing: border-box;


            .content {
                width: 1400px;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;

                .title {
                    margin-bottom: 20px;

                    h1 {
                        font-size: 40px;
                        font-weight: 600;
                        display: inline;
                        letter-spacing: 3px;
                        color: #122555;
                    }
                }

                h3 {
                    font-weight: 600;
                    font-size: 14px;
                    color: #122555;
                    line-height: 24px;
                    margin-left: 2px;
                }

                .features {
                    margin-top: 10px;

                    ul {
                        display: flex;

                        li {
                            display: flex;
                            font-size: 14px;
                            font-weight: 600;
                            color: #122555;
                            margin-right: 32px;

                            .icon {
                                display: flex;
                                align-items: center;
                            }
                        }
                    }
                }

                .describe {
                    margin-top: 35px;

                    ul {
                        li {
                            display: flex;
                            font-size: 12px;

                            .icon {
                                display: flex;
                                align-items: center;
                            }
                        }
                    }
                }

                .btnBox {
                    margin-top: 54px;

                    button {
                        margin-right: 10px;
                        width: 100px;
                    }

                }

            }

        }
    }

    main {
        // width: 100%;
        // padding: 0 8%;
        // box-sizing: border-box;
        width: 1400px;
        margin: 0 auto;

        .hotActivity {
            width: 100%;
            margin-top: 80px;


            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .contentBox {
                display: flex;
                align-items: center;
                justify-content: space-around;
                margin-top: 70px;

                .ele {
                    display: flex;
                    align-items: center;
                    line-height: 30px;
                    height: 140px;

                    p {
                        font-weight: 600;
                    }

                    span {
                        font-size: 14px;
                        font-weight: 400;
                    }
                }

                .ele:hover {
                    background: url(@/assets/images/newImg/Frame55.png)no-repeat center center/cover;
                    transition: all 0.6s;
                }
            }

            .products {
                margin-top: 70px;

                .top {
                    .tabs {

                        ::v-deep .el-tabs__nav-wrap,
                        .is-top {
                            display: flex;
                            justify-content: center;

                            .el-tabs__nav,
                            .is-top {
                                width: 500px;
                                justify-content: space-around;

                            }

                            .el-tabs__nav-wrap::after {
                                background-color: transparent !important;
                            }

                            .el-tabs__item.is-active {
                                color: #2F54EB;
                            }
                        }

                        ::v-deep .el-tabs__active-bar,
                        .is-top {
                            background-color: #2F54EB;
                        }
                    }

                    .more {
                        text-align: right;
                        cursor: pointer;
                        color: #6D7C90;
                        font-size: 14px;
                    }
                }


                .productsBox {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    margin-top: 40px;

                    .ele {
                        // width: 48%;
                        width: 335px;
                        margin-bottom: 30px;
                        padding: 10px 25px;
                        box-sizing: border-box;
                        // border-radius: 5px;
                        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);

                        .top {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .title {
                                font-size: 18px;
                                font-weight: 600;
                            }

                            .type {
                                border: 1px solid #7747C6;
                                padding: 0 10px;
                                color: #7747C6;
                                box-sizing: border-box;
                                font-size: 12px;
                                line-height: 20px;
                            }

                            .types {
                                border: 1px solid #13C2C2;
                                color: #13C2C2;
                            }

                            .typex {
                                border: 1px solid #377CF1;
                                color: #377CF1;
                            }

                            .typef {
                                border: 1px solid #1D39C4;
                                color: #1D39C4;
                            }
                        }

                        .center {
                            font-weight: 400;
                            font-size: 12px;
                            color: #6D7C90;
                            line-height: 28px;
                        }

                        .bottom {

                            .priceBox {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .really {
                                    color: red;
                                    font-weight: 600;
                                    font-size: 14px;
                                    // margin-right: 30px;

                                    span {
                                        font-size: 14px;
                                        font-weight: normal;
                                    }
                                }

                                .false {
                                    color: #99A3B1;
                                    text-decoration: line-through;
                                }
                            }

                            .btnBox {
                                margin-top: 20px;

                                button {
                                    width: 100%;
                                    background-color: #fff;
                                    border: 1px solid #c4c4c4;
                                    color: #2F54EB;

                                }
                            }

                        }
                    }

                    .ele:hover {
                        background: url(@/assets/images/newImg/Frame248.png)no-repeat;

                        .type {
                            border: 1px solid #fff;
                            color: #fff;
                        }

                        .btnBox {
                            button {
                                background-color: #2F54EB;
                                border-color: #2F54EB;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }

        .serve {
            width: 100%;
            margin-top: 80px;


            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }

                p {
                    margin-top: 20px;
                    font-size: 14px;
                }
            }

            .ability {
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-top: 60px;

                .ele {
                    text-align: center;

                    .steps {
                        background: url(@/assets/images/newImg/Frame54.png)no-repeat center center/cover;
                        width: 100px;
                        height: 70px;
                        line-height: 70px;
                        margin: 0 auto;
                        color: #2F54EB;
                        font-size: 20px;
                        margin-bottom: 20px;
                    }

                    .stepTw {
                        background: url(@/assets/images/newImg/02.png)no-repeat center center/cover;
                    }

                    .stepTh {
                        background: url(@/assets/images/newImg/03.png)no-repeat center center/cover;
                    }

                    .small {
                        font-size: 14px;
                        line-height: 25px;
                    }
                }
            }

            .processImg {
                width: 100%;
                margin-top: 60px;

                img {
                    display: block;
                    width: 100%;
                }
            }

            .advantage {
                display: flex;
                justify-content: space-between;
                margin-top: 50px;

                .ele {
                    width: 200px;
                    border-radius: 5px;
                    text-align: center;
                    padding: 0 10px;
                    box-sizing: border-box;
                    background: linear-gradient(to bottom, #93a8ff, #fff);

                    .imgBox {
                        width: 64px;
                        height: 70px;
                        margin: 0 auto;

                        img {
                            width: 100%;
                            display: block;
                        }
                    }

                    .title {
                        font-weight: 600;
                    }

                    .msg {
                        font-size: 14px;
                        line-height: 24px;
                        color: #576373;
                    }
                }

                .ele:hover {
                    transform: translateY(-30px);
                    transition: all 0.5s;
                }

            }
        }

        .weSupport {
            width: 100%;
            margin-top: 80px;


            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .contentBox {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                margin-top: 50px;

                .ele {
                    width: 48%;
                    margin-bottom: 30px;
                    padding: 30px 20px;
                    box-sizing: border-box;
                    font-size: 14px;
                    background-color: skyblue;
                    color: #fff;
                    background: url(@/assets/images/newImg/Frame15.png)no-repeat center center/cover;

                    .steps {
                        font-size: 50px;
                        color: transparent;
                        -webkit-text-stroke: 1px #FFFFFF;
                    }

                    h4 {
                        font-size: 18px;
                        font-weight: 600;
                        margin-top: 10px;
                        line-height: 26px;
                    }

                    .other {
                        line-height: 26px;
                        margin-top: 24px;
                    }
                }

                .ele:hover {
                    box-shadow: 5px 5px 20px -5px black;
                }

                .step2 {
                    background: url(@/assets/images/newImg/Frame16.png)no-repeat center center/cover;
                }

                .step3 {
                    background: url(@/assets/images/newImg/Frame17.png)no-repeat center center/cover;
                }

                .step4 {
                    background: url(@/assets/images/newImg/Frame18.png)no-repeat center center/cover;
                }
            }
        }

        .strengths {
            width: 100%;
            margin-top: 80px;


            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .contentBox {
                display: flex;
                align-items: center;
                margin-top: 60px;

                .leftImg {
                    width: 45%;
                    margin: 0 auto;

                    img {
                        display: block;
                        width: 100%;
                    }
                }

                .right {
                    margin: 0 auto;
                    width: 45%;

                    .item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 20px;

                        .fontBox {
                            line-height: 25px;

                            p {
                                font-weight: 600;
                            }

                            span {
                                font-size: 12px;
                            }
                        }

                    }
                }
            }
        }

        .productAbility {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .contentBox {
                width: 100%;
                margin-top: 50px;
                display: flex;
                justify-content: space-between;
                position: relative;
                background: url(@/assets/images/newImg/Group343.png)no-repeat;
                background-size: 100%;
                padding: 60px 40px 0 40px;
                box-sizing: border-box;

                .lower,
                .hoist {
                    text-align: center;
                    width: 47%;

                    .top {
                        .num {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-bottom: 20px;

                            p {
                                color: #2F54EB;
                                font-size: 60px;
                            }

                            .imgBox {
                                width: 55px;

                                img {
                                    width: 100%;
                                    display: block;
                                }
                            }
                        }

                        h4 {
                            font-size: 28px;
                            font-weight: 600;

                            span {
                                color: #2F54EB;
                            }
                        }
                    }

                    .center {
                        margin-top: 58px;
                        line-height: 28px;
                        font-size: 14px;
                        height: 100px;

                        p:first-of-type {
                            font-weight: 600;
                            color: #576373;
                        }

                        .small {
                            text-align: left;
                            font-weight: 400;
                            font-size: 14px;
                            color: #6D7C90;
                        }
                    }

                    .bottom {
                        margin-top: 50px;

                        .title {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            background-color: #597EF7;
                            border-radius: 20px 20px 0px 0px;

                            .iconBox {
                                width: 36px;
                                height: 32px;

                            }

                            h5 {
                                color: #fff;
                                font-weight: 600;
                                margin-left: 15px;
                            }
                        }

                        .msg {
                            font-size: 14px;
                            color: #6D7C90;
                            text-align: left;
                            margin-top: 20px;

                            ul {
                                display: flex;
                                justify-content: space-between;

                                li {
                                    width: 30%;
                                }
                            }
                        }
                    }
                }

                .hoist {
                    .top {
                        .num {
                            p {
                                color: #13C2C2;
                            }
                        }

                        h4 {
                            span {
                                color: #13C2C2;
                            }
                        }
                    }

                    .bottom {
                        .title {
                            background-color: #13C2C2;
                        }

                        .msg {
                            ul {
                                li {
                                    width: 45%;
                                }
                            }

                        }
                    }

                }

                .positon {
                    position: absolute;
                    left: 50%;
                    top: 10px;
                    transform: translateX(-80px);
                    width: 160px;

                    img {
                        width: 100%;
                    }
                }
            }
        }
    }

    footer {
        width: 100%;

        .join {
            width: 100%;
            padding: 60px 0;
            box-sizing: border-box;
            margin-top: 70px;
            background: url(@/assets/images/newImg/Frame26.png)no-repeat center center/cover;

            // background-size: 100%;
            .content {
                width: 1400px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left {
                    h4 {
                        font-weight: 600;
                        font-size: 28px;
                        margin-bottom: 40px;
                    }

                    p {
                        font-size: 14px;
                        color: #414A56;
                        line-height: 24px;
                    }
                }

                button {
                    background: linear-gradient(to right, #2F59EA, #2BC2C2);
                    border: none;
                }
            }

        }

        .dot {
            position: fixed;
            bottom: 100px;
            right: 50px;
            background-color: #fff;
            padding: 5px;
            border-radius: 10px;
            cursor: pointer;

            .imgBox {
                width: 26px;
                height: 26px;

                img {
                    display: block;
                    width: 100%;
                }
            }

            p {
                color: #2F54EB;
                font-size: 14px;
                font-weight: 600;
                line-height: 20px;
            }

        }

        .dot:hover {
            background-color: #d7d7d7;

            p {
                color: #fff;
            }
        }
    }

}
</style>